<%@ page import="cn.medemede.model.Pattern" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/highlight.pack.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/agate.css">
    <style>
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 100px; /* Set the top position of pinned element */
        }
        p{ text-indent:2em;}
    </style>
    <%
        Pattern pattern;
        pattern= (Pattern) session.getAttribute("pattern");
    %>
    <title><%=pattern.getPname()%></title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20" style="padding-top: 70px;">

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            </button>
            <a class="navbar-brand" href="welcome.jsp"><strong>设计模式</strong></a>
        </div>
        <div class="navbar-right">
            <p class="navbar-text">【管理员】 <a href="log_suc.jsp" class="navbar-link">徐传鹏</a></p>
            <button type="button" class="btn btn-default navbar-btn " onclick="check()">注销</button>
        </div>
    </div>
</nav>


<div class="container">
    <div class="row">
        <div class="page-header" style="width:50%;margin:0 auto">
            <h1><%=pattern.getPname()%><small>&nbsp;<%=pattern.getPnameEn()%></small></h1>
        </div>

        <div class="col-sm-2" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked affix" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1"><%=pattern.getPname()%></a></li>
                <li><a href="#section-2">摘要</a></li>
                <li><a href="#section-3">UML图</a></li>
                <li><a href="#section-4">实现</a></li>
                <li><a href="#section-5">总结</a></li>
            </ul>
        </div>

        <div class="col-sm-7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" id="section-1"><%=pattern.getPname()%></h3>
                </div>
                <div class="panel-body">
                    <p><%=pattern.getPinfo()%></p>
                </div>
            </div>

            <div id="section-2" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">什么是<%=pattern.getPname()%>？</h3>
                </div>
                <div class="panel-body">
                    <p><strong>使用频率：</strong><img alt="使用频率示意图" src=<%=pattern.getPusedimg()%>>&nbsp;&nbsp;<%=pattern.getPused()%> </p>
                    <%=pattern.getPmain()%>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 id="section-3" class="panel-title">UML图：</h3>
                </div>
                <div class="panel-body">
                    <img alt="UML图" style="width: 100%" src=<%=pattern.getPuml()%>>
                </div>
            </div>
            <div id="section-4" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">实现</h3>
                </div>
                <div class="panel-body">
                    <p><%=pattern.getPcodeinfo()%></p>
                    <%=pattern.getPcodeuml()%>
                    <br>
                    <%=pattern.getPcode()%>
                    <br>
                    <p><strong>输出</strong></p>
                    <pre><code class="java"><%=pattern.getPcodepr()%></code></pre>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 id="section-5" class="panel-title">总结：</h3>
                </div>
                <div class="panel-body">
                    <%=pattern.getOther()%>
                </div>
            </div>
        </div>

        <div id="list" class="col-sm-3">
            <ul class="list-group"  style="width:90%;float:right">
                <h3>模式列表</h3>
                <li class="list-group-item"><strong>----------创建型模式------------</strong></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=2">工厂模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=3">抽象工厂模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=4">单例模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=5">建造者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=6">原型模式</a></li>
                <li class="list-group-item"><strong>----------结构型模式------------</strong></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=7">适配器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=8">桥接模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=9">过滤器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=10">组合模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=11">装饰模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=12">外观模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=13">享元模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=14">代理模式</a></li>
                <li class="list-group-item"><strong>----------行为型模式------------</strong></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=15">迭代器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=16">策略模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=17">观察者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=18">状态模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=19">备忘录模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=20">命令模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=21">职责链模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=22">中介者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=23">解释器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=24">访问者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=25">模板方法模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=six">------------六大原则------------</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=end">-------------总结---------------</a></li>
            </ul>
        </div>
    </div>
</div>

<script>
    function check() {
        if (confirm("注销?")){
            $.post("/patterns/JServlet",{
                    actionName:"clear"},
                function (data) {
                    if (data.search("clearSuc")!==-1){
                        window.location.href="index.jsp";
                    }else {
                        alert("对不起，注销失败！请重试。");
                    }
                }
            );
        }
    }
</script>
</body>
</html>